$(function() {


	var $el = {
		item_list: $("#pic-list"),
		tar_img_wrap: $("#tar-img-wrap"),
		tar_img: $("#tar-img"),
		pic_list : $("#pic-list"),

		show_area: $("#show-area"),
		r_left: $("#r-left"),
		r_right: $("#r-right"),
		s_big: $("#s-big"),
		s_sml: $("#s-sml"),

		pkg : $("#pkg")
	}

	var _item_list = {
		pkg: [{
			id: 'pkg_01',
			src: 'images/pj/pkg/1.jpg'
		}, {
			id: 'pkg_02',
			src: 'images/pj/pkg/2.jpg'
		}, {
			id: 'pkg_03',
			src: 'images/pj/pkg/3.jpg'
		}],

		items: {

			's0': [{
				id: 'style_rc_01',
				src: 'images/pj/pic/sday01.png'
			}, {
				id: 'style_rc_02',
				src: 'images/pj/pic/sday02.png'
			}, {
				id: 'style_rc_03',
				src: 'images/pj/pic/sday03.png'
			}, {
				id: 'style_rc_04',
				src: 'images/pj/pic/sday04.png'
			}, {
				id: 'style_rc_05',
				src: 'images/pj/pic/sday05.png'
			}, {
				id: 'style_rc_06',
				src: 'images/pj/pic/sday06.png'
			}, {
				id: 'style_rc_07',
				src: 'images/pj/pic/sday07.png'
			}, {
				id: 'style_rc_08',
				src: 'images/pj/pic/sday08.png'
			}],
			's1': [{
				id: 'style_xrz_01',
				src: 'images/pj/pic/day01.png'
			}, {
				id: 'style_xrz_02',
				src: 'images/pj/pic/day02.png'
			}, {
				id: 'style_xrz_03',
				src: 'images/pj/pic/day03.png'
			}, {
				id: 'style_xrz_04',
				src: 'images/pj/pic/day04.png'
			}, {
				id: 'style_xrz_05',
				src: 'images/pj/pic/day05.png'
			}, {
				id: 'style_xrz_06',
				src: 'images/pj/pic/day06.png'
			}, {
				id: 'style_xrz_07',
				src: 'images/pj/pic/day07.png'
			}]
		}
	}

	var _ww = $("#pic-list li").eq(0).width() + 2;
	$("#pic-list").width($("#pic-list li").length * _ww)

	var final_result = {};

	function initEvent() {

		$("#sub_pj").on('click',function() {
			console.log(final_result);
		});

		$("#sel-style").on('change', function() {
			var v = $(this).val();
			var list = _item_list['items'][v];
			var html='';
			$.each(list,function(i,c) {
				html += '<li data-id="'+c.id+'"><img src="'+c.src+'" alt=""></li>'
			});

			$el.pic_list.html(html);
		});

		$("#sel-pkg").on('change',function() {
			var v = parseInt($(this).val());
			var item = _item_list.pkg[v];

			$el.pkg.data('pkid',item.id).attr('src',item.src);
			final_result.pkg= item;
		});

		$el.item_list.on('click', 'li', function() {
			var src = $(this).find('img').attr('src');
			var id = $(this).data('id');
			$el.tar_img_wrap.show();
			$el.r_right.show();
			$el.r_left.show();
			$el.s_sml.show();
			$el.s_big.show();
			$el.tar_img.attr('src', src);

			final_result.id = id;
			final_result.src = src;
		});

		// 移动图片
		var startP = {},
			isTouchstart = 0;
		var cur_x = 0,
			cur_y = 0,
			dx = 0,
			dy = 0,
			temX, temY;
		var cW = $el.show_area.width(),
			cH = $el.show_area.height();

		var imgW = $el.tar_img_wrap.width(),
			imgH = $el.tar_img_wrap.height(),
			dImg = {};

		var cur_ang = 0;
		var cur_scale = 1;

		$el.tar_img_wrap.on('touchstart', function(e) {

			var d = e.originalEvent.changedTouches[0];
			startP.x = d.pageX;
			startP.y = d.pageY;

			isTouchstart = 1;

			imgW = $el.tar_img_wrap.width();
			imgH = $el.tar_img_wrap.height();

			dImg.x = imgW - imgW*cur_scale;
			dImg.y = imgH - imgH*cur_scale;

			e.preventDefault();
			e.stopPropagation();

		});

		$el.tar_img_wrap.on('touchmove', function(e) {
			if (isTouchstart) {

				var p = e.originalEvent.changedTouches[0];
				dx = p.pageX - startP.x;
				dy = p.pageY - startP.y;

				var x = cur_x + dx;
				x = Math.max(-dImg.x*cur_scale, x); //左边
				x = Math.min(x, cW - imgW + dImg.x * cur_scale);

				var y = cur_y + dy
				y = Math.max(-dImg.y*cur_scale, y);
				y = Math.min(y, cH - imgH +dImg.y*cur_scale );

				temX = x;
				temY = y;

				$el.tar_img_wrap.css({
					left: x,
					top: y
				});
			}

			e.preventDefault();
			e.stopPropagation();

		});

		$el.tar_img_wrap.on('touchend', function() {
			isTouchstart = 0;
			cur_x = temX;
			cur_y = temY;

			final_result.x = temX;
			final_result.y = temY;

		});

		// 旋转图片

		$el.r_left.on('touchstart', function(e) {
			cur_ang -= 10;

			setTransform(cur_scale, cur_ang);

			e.preventDefault();
			e.stopPropagation();


			final_result.ang = cur_ang;

		});

		$el.r_right.on('touchstart', function(e) {
			cur_ang += 10;

			setTransform(cur_scale, cur_ang);

			e.preventDefault();
			e.stopPropagation();


			final_result.ang = cur_ang;
		});

		// 放大
		$el.s_big.on('touchstart', function(e) {
			cur_scale += .1;

			setTransform(cur_scale, cur_ang);

			e.preventDefault();
			e.stopPropagation();


			final_result.scale = cur_scale;
		});

		$el.s_sml.on('touchstart', function(e) {
			cur_scale -= .1;

			setTransform(cur_scale, cur_ang);

			e.preventDefault();
			e.stopPropagation();


			final_result.scale = cur_scale;

		});


	}

	function setTransform(cur_scale, cur_ang) {
		$el.tar_img_wrap.css({
			'transform': 'rotate(' + cur_ang + 'deg) scale(' + cur_scale + ',' + cur_scale + ')',
			'-webkit-transform': 'rotate(' + cur_ang + 'deg) scale(' + cur_scale + ',' + cur_scale + ')'
		});
	}


	initEvent();

});